<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
				padding:0;
				margin:0;
				overflow:hidden;
			}
    </style>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <script src="./Fire.js"></script>
</head>
<body>
    
</body>
<script>
    var camera, scene, renderer, controller;
    var fire, plane;

    init();
	animate();
    // - Functions -
    function init(){
        var width = window.innerWidth;
        var height = window.innerHeight;

        camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
        camera.position.z = 25;

        scene = new THREE.Scene();
        var axesHelper = new THREE.AxesHelper( 5 );
        scene.add( axesHelper );
        // - Lights -
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        scene.add( ambientLight );

        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
        camera.add( pointLight );
        scene.add( camera );
        // - Add Fire - 
        plane = new THREE.PlaneBufferGeometry( 10, 10 );
        var cube = new THREE.BoxGeometry(10,10,10)
        var sphere = new THREE.SphereGeometry(10,10,10)
        sphere.computeVertexNormals()
        var cylinderBufferGeometry = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
        // var sparite
        var geometry = new THREE.BufferGeometry();
        var vertices = new Float32Array( [
            -1.0, -1.0,  1.0,
            1.0, -1.0,  1.0,
            1.0,  1.0,  1.0,

            1.0,  1.0,  1.0,
            -1.0,  1.0,  1.0,
            -1.0, -1.0,  1.0
        ] );
        geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
        var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        var mesh = new THREE.Mesh( geometry, material );
        // scene.add(mesh)
        fire = new THREE.Fire( plane, {
            textureWidth: 512,
            textureHeight: 512,
            debug: false
        } );

        // fire = new THREE.Fire( cube, {
        //     textureWidth: 512,
        //     textureHeight: 512,
        //     debug: false
        // } );

        // fire = new THREE.Fire( sphere, {
        //     textureWidth: 512,
        //     textureHeight: 512,
        //     debug: false
        // } );

        fire.position.z = - 2;
        fire.clearSources();
		fire.addSource( 0.5, 0.1, 0.1, 1.0, 0.0, 1.0 );
        scene.add( fire );
        // fire.position.set(0,0,0)
        // fire.rotateY(Math.PI/2)
        // camera.position.set(5,5,5)
        // camera.add(plane)
        // - Renderer -
        renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor (new THREE.Color(0xCCCCCC),0.5)
        // renderer.autoClear = false;
        document.body.appendChild( renderer.domElement ); 
        controller = new THREE.OrbitControls(camera,renderer.domElement)
        window.addEventListener( 'resize', onWindowResize, false );

    }

    function animate(){
        requestAnimationFrame( animate );
        controller.update()

        fire.rotation.copy(camera.rotation) // 对象始终面向相机
        // fire.updateMatrix()

        // plane.lookAt(camera.position)
        // renderer.clear();
        renderer.render( scene, camera );
    }

    function onWindowResize() {

        var width = window.innerWidth;
        var height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
</script>
</html>